<template>
  <view class="cell-view">
    <u-cell-group class="cell-view-group" :title="title" :border="false">
      <template v-for="item in cellList" :key="item.id">
        <u-cell
          v-if="item.cellType === 'select'"
          :title="item.filedName"
          :isLink="true"
          arrow-direction="right"
          :value="item.value"
          @tap="() => handleCellClick(item)"
        />
        <u-cell v-if="item.cellType === 'input'" :title="item.label">
          <template #value>
            <up-input
              border="none"
              placeholder="请输入名称为关键字"
              :placeholderStyle="{ textAlign: 'end' }"
            />
          </template>
        </u-cell>
      </template>
    </u-cell-group>

    <!--弹出层-->
    <u-popup
      class="my-popur"
      :show="popupShowFlag"
      :round="33"
      @close="popupClose"
      @open="popupOpen"
    >
      <view class="title"> 选择 {{ curPopupTitle }} </view>
      <up-list height="400rpx">
        <up-list-item v-for="(item, index) in curPopupDataList" :key="index">
          <u-cell
            :title="item.filedName"
            :border="false"
            @tap="() => handlePopupCellClick(item)"
          >
            <template #value>
              <u-icon v-if="item.checked" name="checkbox-mark" />
            </template>
          </u-cell>
        </up-list-item>
      </up-list>
      <up-button
        text="取消"
        shape="circle"
        color="linear-gradient(to right, #FF934C, #FC686F )"
        @click="popupClose"
      />
    </u-popup>
  </view>
</template>
<script setup>
import { defineProps, ref, defineEmits } from "vue";

const props = defineProps({
  // 分组标题
  title: {
    type: String,
    default: "",
  },
  // 分组标题样式
  titleStyle: {
    type: Object,
    default: {},
  },
  cellList: {
    type: Array,
    default: [],
  },
});

const popupShowFlag = ref(false);
const popupOpen = () => {};

const popupClose = () => {
  popupShowFlag.value = false;
};

// 弹窗标题
const curPopupTitle = ref("");
// 弹窗数据
const curPopupDataList = ref([]);
/**
 * 监听单元格点击事件
 * @param cellItem
 */
const handleCellClick = (cellItem) => {
  const { filedName, children } = cellItem || {};
  Array.isArray(children) &&
    children.forEach((child) => {
      if (!child.hasOwnProperty("checked")) return (child.checked = false);
    });
  curPopupTitle.value = filedName;
  curPopupDataList.value = children;
  popupShowFlag.value = true;
};

const handlePopupCellClickEmit = defineEmits(["handlePopupCellClick"]);
/**
 * 监听弹窗单元格点击事件
 * @param selectedVal
 */
const handlePopupCellClick = (selectedVal) => {
  const { id } = selectedVal || {};
  const findCellData = props.cellList.find(
    (cell) => cell.filedName === curPopupTitle.value
  );
  curPopupDataList.value.map((item) => (item.checked = false));
  findCellData.children.find((item) => item.id === id).checked = true;
  handlePopupCellClickEmit("handlePopupCellClick", {
    selectedItem: findCellData.children.find((item) => item.checked),
    labelName: curPopupTitle.value,
  });
  popupShowFlag.value = false;
};
</script>
<style lang=less>
@import url(../style/cell-group.less);
</style>
